<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>百度地图测试</title>
  <style type="text/css">
    html {
      height: 100%;
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    #container {
      height: 600px;
      width: 800px;
    }

    .anchorBL {
      display: none
    }

    .BMap_stdMpZoom {
      display: block
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    function loadJScript() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      // callback 定义 加载后 执行的函数
      script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=yvu4YGW9MmqqgipzLiiwtX6Yk7SvIFSF&callback=init';
      document.body.appendChild(script);
    }
    function init() {
      // console.log(window.BMapGL)  // 地图对象
      var map = new BMapGL.Map("container");
      var point = new BMapGL.Point(116.404, 39.915); // 北京市中心坐标点
      map.centerAndZoom(point, 10, { minZoom: 5, maxZoom: 14, mapType: BMAP_NORMAL_MAP }); // 显示地图, 传入 中心点 与 MapOption
      map.enableScrollWheelZoom(true); // 允许滚轮放大
      map.setMapStyleV2({
        styleId: 'a00d449906ae434fbdd20c6c8c242316'
      });
      map.setHeading(0);
      map.setTilt(0);
      // 添加缩放控件
      var zoomCtrl = new BMapGL.ZoomControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT
      });
      // 添加缩放控件
      map.addControl(zoomCtrl);
      // 添加事件
      map.addEventListener("zoomstart", function () {
        console.log(map.getZoom()); // 返回 zoom前的值
      })
      // 添加控件 标尺
      var scaleCtrl = new BMapGL.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMapGL.Size(10, 10) });
      map.addControl(scaleCtrl);

    }
    window.onload = loadJScript; //异步加载地图
  </script>
</body>

</html>